<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态样式</title>
</head>
<body>
  <div id="app">
    HELLO CSS
  </div>
</body>
<script>
  /** 1.CSS 样式在 HTML 页面中可以通过两个元素加载。<link>元素用于包含 CSS 外部文件，而<style>元素用于添加嵌入样式。与动态脚本类似，动态样式也是页面初始加
   *    载时并不存在，而是在之后才添加到页面中的。
   * **/

  /** 2.动态样式-动态引入外部样式
   *    a.通过<link>标签直接引入外部样式。（<link rel="stylesheet" type="text/css" href="styles.css">）
   *    b.采用 DOM编程 通过创建<link>标签，进而引入外部样式。（注意应该把<link>元素添加到<head>元素而不是<body>元素，这样才能保证所有浏览器都能正常运行。
   *    c.通过外部文件加载样式是一个异步过程。因此，样式的加载和正执行的 JavaScript 代码并没有先后顺序。一般来说，也没有必要知道样式什么时候加载完成。
   *      ）
   * **/
  function  loadStyles(css_url){
    //1.创建link标签
    let linkDOM = document.createElement('link');
    //2.给link标签配置属性
    linkDOM.type="text/css";
    linkDOM.rel="stylesheet";
    //3.给link标签配置路径属性名以及属性值
    linkDOM.href=css_url;
    //4.获取页面中的head标签
    let headDOM = document.getElementsByTagName('head')[0];
    //5.将创建的link标签添加到head标签下面
    headDOM.appendChild(linkDOM);
  }
  // loadStyles('outerLink.css')

  /** 3.动态样式-使用<script>元素包含嵌入的 CSS 规则
   *    a.<style type="text/css"> body { background-color: red; } </style>。
   *    b.IE 对<style>节点会施加限制，不允许访问其子节点，这一点与它对<script>元素施加的限制一样。
   *    c.事实上，IE 在执行到给<style>添加子节点的代码时，会抛出与给<script>添加子节点时同样的错误。
   *    d.对于 IE，解决方案是访问元素的 styleSheet 属性，这个属性又有一个 cssText 属性，然后给这个属性添加 CSS 代码
   * **/
   function loadStyleString(cssStr){
     //1.创建style标签
     let styleDOM = document.createElement('style');
     //2.给style标签添加属性
      styleDOM.rel = 'stylesheet';
      styleDOM.type = 'text/css';
      try{
        //3.非旧版IE浏览器，直接创建文本节点并添加到style标签中
        let textNode = document.createTextNode(cssStr);
        styleDOM.appendChild(textNode);
      }catch(e){
        console.log(e);
        //4.旧版 IE 采用styleSheet属性
        styleDOM.styleSheet.cssText = cssStr
      }
      //5.获取页面中的head标签
      let headDOM = document.getElementsByTagName('head')[0];
      headDOM.appendChild(styleDOM);
   }
   let cssStr = "#app { color:red;font-size:16px;font-weight:500} body { background-color:aqua}";
   loadStyleString(cssStr);
</script>
</html>
